<!doctype html>
<html>
	<head>
		<meta charset="utf-8">
		<title>SST快捷充值</title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link rel="stylesheet" type="text/css" href="css/vant.css"/>
		<script type="text/javascript" src="./js/vue.js"></script>
		<script type="text/javascript" src="./js/vue-resource-v1.5.1.js"></script>
		<script type="text/javascript" src="./js/vant.js"></script>
		<style>
			html{
				font-size: 55px
			}
			html,body{
				margin: 0;
				padding: 0;
			}
			body{
				font-size: .3rem
			}
			div,input{
			    box-sizing: border-box;
			}
			.buyusdt_empty{
				height: .6rem;
			}
			.buyusdt_surebuy{
				padding: 0 .3rem;text-align: center;font-weight: 700;color: #12b5bc;font-size: .5rem
			}
			.buyusdt_surebuy>div{
				border-top: 1px solid #eeeeee;padding: .35rem;margin-top: .15rem;
			}
			.buyusdt_msg>div{
				display: flex;
				justify-content: space-between;
				padding: .15rem .3rem;
				color: black;
			}
			.buyusdt_yes{
				text-align: right;font-weight: 700;
			}
			.buyusdt_yes img{
				width: .35rem!important
			}
			.buyusdt_pay .buyusdt_pay_choose{
				border: 1px solid #2c99f7;
			}
			.buyusdt_pay{
				display: flex;padding: .4rem .3rem;
			}
			.buyusdt_pay>div{
				width: 35%;
				height: 1.3rem;
				padding: .2rem .08rem;
				display: flex;
				flex-direction: column;
				border-radius: .1rem;
				box-shadow: 0 0 .1rem 0 #d8d8d8;
				margin-right: .2rem;
				transition: .3s;
				border: 1px solid transparent;
			}
			.buyusdt_pay>div img{
				width: .5rem;margin-right: .2rem;
			}
			.buyusdt_close{
				display: flex;
				justify-content: space-between;
				padding: .4rem .3rem .25rem;
				color: grey;border-bottom: 1px solid #eeeeee;
			}
			.buyusdt_close>div:first-child{
				font-weight: 700;font-size: .35rem;color: #000000;
			}
			.buyusdt_btn{
				padding: 0 .3rem;
			}
			.buyusdt_btn>div{
				border-radius: .15rem;background-color: #12b5bc;color: white;text-align: center;line-height: .85rem;margin-top: .5rem;
			}
			.buyusdt_btn img{
				width: .45rem;vertical-align: middle;
			}
			.buyusdt_price{
				padding: .2rem .3rem;color: grey;
			}
			.buyusdt_title{
				padding: .2rem .3rem;font-size: .3rem;color: black;
			}
			.buyusdt_input{
				position: relative;padding: 0 .35rem;margin: .2rem 0;
			}
			.buyusdt_input>div{
				font-size: .3rem;font-weight: 700;position: absolute;right: .3rem;top: 50%;transform: translateY(-50%);text-align: center;width: 1.5rem;
			}
			.buyusdt_input input{
				width: 100%;
				border: none;
				padding-right: 1rem!important;
				padding-left: .2rem!important;
				border-bottom: 1px solid #12b5bc;
				padding: .26rem 0;
				font-size: .3rem;
				font-weight: 700;
			}
			.buyusdt_input input::-webkit-input-placeholder { /* WebKit browsers */ 
				font-size:.3rem;
			} 
			.buyusdt_input input:-moz-placeholder { /* Mozilla Firefox 4 to 18 */  
				font-size:.3rem;
			} 
			.buyusdt_input input::-moz-placeholder { /* Mozilla Firefox 19+ */ 
				font-size:.3rem;
			} 
			.buyusdt_input input:-ms-input-placeholder { /* Internet Explorer 10+ */ 
			    font-size:.3rem;
			} 
			.buyusdt_box{
				background-color: white;margin-top: -.2rem;border-radius: .15rem;
			}
			.buyusdt_tab>div{
				transition: .3s;border-bottom: 2px solid transparent;
			}
			.buyusdt_tab{
				color: #343434;
				font-size: .3rem;
				padding: .4rem .35rem 0;
				justify-content: center;
				border-bottom: 2px solid #eeeeee;
			}
			.buyusdt_tab>div{
				width: 1.5rem;text-align: center;margin: 0 .3rem;padding-bottom: .2rem;
			}
			.buyusdt_tab .buyusdt_tab_choose{
				color: #12b5bc;font-weight: 700;border-bottom: 2px solid #12b5bc;
			}
			.buyusdt_top_left span{
				color: rgba(255,255,255,.8);transition: .3s;font-size: .3rem;margin-right: .2rem;
			}
			.buyusdt_top_left .buyusdt_top_left_choose{
				color: white;font-size: .35rem;font-weight: 700;font-size: .5rem;
			}
		   .buyusdt_top{
		   	  background-color: #12b5bc;padding: .8rem .3rem .45rem;color: white;display: flex;justify-content: space-between;
		   }
		   .buyusdt_top_left{
		   	  
		   }
		   .buyusdt_top_right img{
		   	  width: .55rem;
		   }
		    .buyusdt_top_right>div{
				text-align: center;
			}
			.flex{
				display: flex;
				justify-content: space-around;
			}
			
			.buyusdt_btn{
				width: 4rem;background-color: #12b5bc;border-radius: 2rem;line-height: .75rem;display: block;color: white;text-align: center;margin: .25rem auto 0;
			}
			.buyusdt_btn_payed,.buyusdt_btn_payed>div{
				background-color: #eeeeee!important
			}
			.buyusdt_popbox .van-popup{
				width: 86%;
				border-radius: .2rem;
				padding: .3rem;
				margin: auto;padding-bottom: .8rem;
			}
			.buyusdt_pop img{
				width: 90%;display: block;margin: auto;
			}
			.usdtpay_tip{
				color: #FB4939;
			} 
			.usdtpay_tip>div:first-child{
				font-size: .35rem
			}
			.usdtpay_tip>div:last-child{
				font-size: .26rem;
				color: #565656;margin-top: .25rem;line-height: .4rem;
			}
			.usdtpay_tip{
				margin-top: .25rem;
			}
			.buyusdt_btn{
				padding: 0 .3rem;
			}
			.buyusdt_btn>div{
				border-radius: .15rem;background-color: #12b5bc;color: white;text-align: center;line-height: .85rem;margin-top: .5rem;
			}
			.usdtpay_sellmsg{
				padding: .3rem 0;border-bottom: 1px solid #eee;
			}
			.usdtpay_sellmsg>div{
				display: flex;justify-content: space-between;align-items: center;color: black;margin: .25rem 0;
			}
			.usdtpay_sellmsg>div>div>img{
				width: .4rem;
			}
			.usdtpay_sellmsg>div>img{
				width: .5rem;
			}
			.usdtpay_business_last{
				display: flex;margin-top: .25rem;
			}
			.usdtpay_business_last>div{
				margin-right: .12rem;
			}
			.usdtpay_business_last img{
				margin: .08rem;width: .45rem;
			}
			.usdtpay_business{
				padding: .25rem 0;border-bottom: 1px solid #eeeeee;
			}
			.usdtpay_business img{
				width: .38rem;margin-left: .06rem;vertical-align: middle;
			}
			.usdtpay_business span{
				background-color: #12b5bc;border-radius: 50%;display: inline-block;color:white;text-align: center;width:.5rem;height: .5rem;line-height: .55rem;margin-right: .16rem;
			}
			.usdtpay_top{
				color: black;font-weight: 700;text-align: center;padding-bottom: .3rem;border-bottom: 1px solid #eeeeee;
			}
			.usdtpay_top>div:nth-child(2){
				font-size: .8rem;margin: .3rem auto .6rem;
			}
			.usdtpay_top>div:nth-child(3){
				font-weight: 500;font-size: .24rem;background-color: #ebeef9;padding: .04rem .2rem;border-radius: 2rem;display: inline-block;margin-right: .2rem;font-size: .24rem;
			}
			.usdtpay_box{
				padding: .3rem .3rem 1rem;
			}
			.usdtpay_contact{
				position:absolute;
				right: .2rem;
				top: 50%;
				transform: translateY(-50%);
			}
			.fast_top{
				background-color: #12b5bc;color: white;font-size: .4rem;padding: 0 .15rem;text-align: center;line-height: .8rem;position: fixed;top: 0;width: 100%;
			}
			.fast_content{
				padding: .9rem .2rem .3rem;
			}
			.list{
				border: 1px solid #dcdcdc;border-radius: .2rem;margin-bottom: .15rem;padding: .15rem 0 0;font-size: .3rem;color: #333333;overflow: hidden;
			}
			.list>div:not(:last-child){
				border-bottom: 1px solid #dcdcdc;padding: .08rem .2rem;
			}
			.list>div:last-child{
				padding: .08rem 0;
			}
			.list>div{
				padding: 0 .2rem;
			}
			.fast_title{
				text-align: center;color: #12b5bc
			}
			.titleChoose{
				color: white;background-color: #12b5bc;
			}
			.fast_com{
				display: flex;justify-content: space-between;
			}
			img{
				vertical-align: middle;
			}
			[v-cloak]{
				opacity: 0;
			}
		</style>
	</head>

	<body>
		<div id="app">
			<div id="left" v-if="step==1" v-cloak>
				<div class="buyusdt_top">
					<div class="buyusdt_top_left">
						<span class="buyusdt_top_left_choose">我要买</span><span>(购买SST)</span>
					</div>
					<div class="buyusdt_top_right" @click="stepto3">
						<div><img src="" alt=""></div>
						<div>订单</div>
					</div>
				</div>
				<div class="buyusdt_box">
					<div class="buyusdt_tab flex">
						<div class="buyusdt_tab_choose">SST</div>
						<!-- <div @click="goPages('')">能量星树</div> -->
					</div>
					<div class="buyusdt_title">
						购买数量
					</div>
					<div class="buyusdt_input">
						<input type="number" placeholder="请填写数量 100-99000" v-model="num">
						<div>SST</div>
					</div>
					<div class="buyusdt_price">
						价格约 1 CNY/SST
					</div>
					<div class="buyusdt_btn">
						<div @click="showpop"><img src="" alt="">0手续费购买</div>
					</div>
				</div>
				<van-popup v-model="show" round position="bottom">
					<div class="buyusdt_close">
						<div>确认购买</div>
						<div @click="show=false">关闭</div>
					</div>
					<div class="buyusdt_pay">
						<div :class="tabchoose=='zfb'?'buyusdt_pay_choose':''" @click="tabchange('zfb')">
							<div>
								<img src="" alt="">支付宝
							</div>
							<div v-show="tabchoose=='zfb'" class="buyusdt_yes"><img src="" alt=""></div>
						</div>
						<div :class="tabchoose=='wx'?'buyusdt_pay_choose':''" @click="tabchange('wx')">
							<div>
								<img src="" alt="">微信
							</div>
							<div v-show="tabchoose=='wx'" class="buyusdt_yes"><img src="" alt=""></div>
						</div>
					</div>
					<div class="buyusdt_msg">
						<div>
							<div>价格</div>
							<div>1 CNY/SST</div>
						</div>
						<div>
							<div>数量</div>
							<div>{{numto}} SST</div>
						</div>
					</div>
					<div class="buyusdt_surebuy">
						<div>
							￥ {{money}}
						</div>
					</div>
					<div class="buyusdt_btn">
						<div @click="payNext">确认购买</div>
					</div>
					<div class="buyusdt_empty"></div>
				</van-popup>
			</div>
			<div id="right" v-if="step==2" v-cloak>
				<div class="fast_top" @click="refresh">> 点我返回上一页 <</div>
				<div class="usdtpay_box">
					<div class="usdtpay_top">
						<div>向卖家付款</div>
						<div>￥ {{money}}</div>
						<div>您正在向认证卖家购买{{numto}} SST</div>
					</div>
					<div class="usdtpay_business">
						<div><span v-if="msg.make_name">兰</span>兰斓<img src="" alt=""></div>
						<div class="usdtpay_business_last">
							<div><img src="" alt="">已缴纳保证金</div>
							<div><img src="" alt="">认证商家</div>
							<div><img src="" alt="">担保交易</div>
						</div>
					</div>
					<div class="usdtpay_sellmsg">
						<div>
							<div>卖家姓名</div>
							<div>兰斓 <img :src="copyimg" alt="" @click="doCopy('兰斓')"></div>
						</div>
						<div v-if="tabchoose=='zfb'">
							<div>支付宝账号</div>
							<div>18076760132 <img :src="copyimg" alt="" @click="doCopy(18076760132)"></div>
						</div>
						<div v-if="tabchoose=='wx'">
							<div>微信账号</div>
							<div>everthingisok <img :src="copyimg" alt="" @click="doCopy('everthingisok')"></div>
						</div>
						<div>
							<div>收款二维码</div>
							<img @click="msgshow=true" :src="qrcode" alt="">
						</div>
					</div>
					<div class="usdtpay_tip">
						<div>重要提示：</div>
						<div>请在付款时在付款备注内填写您注册时的手机号：{{orderInfo.account}}，以便于更精准为您划转SST</div>
					</div>
					<div class="buyusdt_btn" :class="payed?'buyusdt_btn_payed':''">
						<div @click="sure()">我已付款成功</div>
					</div>
					<div class="buyusdt_popbox">
						<van-popup v-model="msgshow">
							<div class="buyusdt_pop">
								<div><img :src="tabchoose=='zfb'?aliUrl:wxUrl" alt=""></div>
								<!-- <a class="buyusdt_btn" :href="'tel:'+payment.account"><van-icon name="phone-o" />{{payment.account}}</a> -->
								<a class="buyusdt_btn" :href="tabchoose=='zfb'?aliUrl:wxUrl" download="">下载二维码</a>
							</div>
						</van-popup>
					</div>
					<div style="height: .8rem;"></div>
				</div>
			</div>
			<div id="list" v-if="step==3" v-cloak>
				<div class="fast_top" @click="refresh">> 点我返回转账 <</div>
				<div class="fast_content">
					<div class="list" v-for="(item,index) in list">
						<div class="fast_com">
							<div>购买SST付款金额</div>
							<div>￥ {{item.totalPrice}}</div>
						</div>
						<div class="fast_com">
							<div>付款方式</div>
							<div v-text="item.payType==2?'支付宝支付':'微信支付'"></div>
						</div>
						<div class="fast_com">
							<div>付款时间</div>
							<div>{{item.createTime}}</div>
						</div>
						<div class="fast_title" :class="item.txStatus==0?'titleChoose':''" @click="sure(item,1,index)" v-text="item.txStatus==0?'我已付款':item.txStatus==1?'等待放币':item.txStatus==2?'交易成功':''"></div>
					</div>
				</div>
			</div>
		</div>
		<script type="text/javascript">
			var vm = new Vue({
				el:'#app',
				data(){
					return{
						show:false,
						tabchoose:'zfb',
						numto:'',
						api:'',
						token:'',
						appMsg:'',
						num:'',
						money:'',
						step:1,
						data:{},
						msg:{},
						aliUrl:'',
						wxUrl:'',
						copyimg:'',
						qrcode:'',
						msgshow:false,
						payed:false,
						orderInfo:'',
						lock:true,
						payment:'',
						list:[]
					}
				},
				watch: {
					num(val){
						if(val){
							this.numto = parseInt(val);
							this.money = this.numto
						}
					}
				},
				created(){
					this.getAppInfo()
				},
				methods:{
					getAppInfo(){
					    this.appMsg = JSON.parse(window.$android.getUserInfo())
						var status = JSON.parse(window.$android.getDev());
						if(status.dve==0){
							//测试环境
							this.api = 'http://162.247.99.201:8107'
						}else if(status.dve==1){
							//正式环境
							this.api = 'http://116.213.40.3:8107'
						}

						this.token = 'Bearer ' + this.appMsg.token
					},
					refresh(){
						this.step = 1
						this.tabchoose = 'zfb'
						this.lock = true
						this.money = ''
						this.data = {}
						this.msg = {}
						this.msgshow = false
						this.payed = false
						this.orderInfo = ''
						this.list = []
					},
					showpop(){
						if(this.num>=100&&this.num<=99000){
							this.show = true
						}else{
							vant.Toast('请输入正确的数量！'); 
						}
					},
					tabchange(index){
						this.tabchoose = index;
					},
					payNext(){
						this.step = 2
						this.getMsg()
					},
					stepto3(){
						this.step = 3
						var data = {
							uid:this.appMsg.userInfo.uid
						}
						this.$http.post(this.api+'/api/queryTransferSstFastList', data ).then(function(res){
							if(res.data.code==200){
								this.list = res.data.data.list
							}else{
						     	vant.Toast(res.data.data.errmsg);
						     }
						},function(res){
							
						}); 
					},
					getMsg(){
						if(this.tabchoose=='zfb'){
							var payType = 2
						}else if(this.tabchoose=='wx'){
							var payType = 1
						}else{
							vant.Toast('tabchoose错误！'); 
						}
						var data = {
							payType,
							txNums:this.numto,
							uid:this.appMsg.userInfo.uid
						}
						var that = this;
						this.$http.post(this.api+'/api/saveTransferSstFast', data ).then(function(res){
							if(res.data.code==200){
								that.orderInfo = res.data.data.orderInfo
								that.payment = res.data.data.payment 
							}else{
						     	vant.Toast(res.data.data.errmsg);
						     }
						},function(res){
							
						}); 
					},
					sure(item,type,index){
						if(!this.lock){
							return vant.Toast('正在提交中！');
						}
						if(item){
							if(item.txStatus!=0){
								return
							}
						}
						if(item){
							if(this.payed){
								return vant.Toast('您已经点过啦！');
							}
						}
						if(type==1){
							var data = {
								stid:item.stid,
								uid:this.appMsg.userInfo.uid
							}
						}else{
							var data = {
								stid:this.orderInfo.stid,
								uid:this.appMsg.userInfo.uid
							}
						}
						this.lock = false
						this.$http.post(this.api+'/api/updateTransferSstFast', data ).then(function(res){
							if(res.data.code==200){
								this.payed = true
								this.lock = true
								if(item){
									this.list[index].txStatus = 1
								}
								vant.Toast('操作成功！');	
							}else{
						     	vant.Toast(res.data.data.errmsg);
						     }
						},function(res){
							
						}); 
					},
					doCopy(url){
						var Url2 = url;
						var oInput = document.createElement('input');
						oInput.setAttribute("readonly", "readonly");
						oInput.value = Url2;
						document.body.appendChild(oInput);
						oInput.select(); // 选择对象
						document.execCommand("Copy"); // 执行浏览器复制命令
						oInput.className = 'oInput';
						oInput.style.display='none';
						vant.Toast('复制成功！');				          
					},
					pay:function(){
						var that = this;
						if(that.payed){
							that.$dialog.message('您已提交！');
							return	  
						}
						if(!that.lock){
							that.$dialog.message('提交中！');
							return	  
						}
						that.lock = false;
						var data = {
							pay_type:this.type=='wx'?'0':this.type=='zfb'?'1':'错误',
							usdt_price:this.data.usdt_price,
							usdt_num:this.num,
							pay_money:(this.data.usdt_price*this.num).toFixed(2),
							make_name:this.msg.make_name
						};
						 buyusdt(data).then(
						   res => {
							that.lock = true;
							that.$dialog.message('操作成功！');
							that.payed = true
						   },
						   err => {
							 that.lock = true;
						     that.$dialog.message(err.msg);
						   }
						 )
					}
				}
			})
		</script>
	</body>

</html>
